<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
  z-index: 999;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.el-page-header__content {
  font-size: 14px;
}

.el-page-header__title {
  font-size: 14px;
}

.hex-form-inf-content-show {
  font-size: 14px;
  font-weight: 500;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}
</style>

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="crud.optPageShow.listPage">
        <div slot="header" class="clearfix">
          <div class="el-page-header__content">告警配置</div>
        </div>
        <div>
          <!--工具栏-->
          <div class="head-container">
            <crudOperation :permission="permission"/>
          </div>
          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" v-if="!this.addDialog" :data="crud.data" style="width: 100%;"
                    @select="crud.selectChange" @row-dblclick="editClick" @select-all="crud.selectAllChange"
                    @selection-change="crud.selectionChangeHandler"
                    @filter-change="crud.handleFilterChange"
                    :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
            <el-table-column type="selection"/>
            <el-table-column v-if="columns.visible('param9')" prop="param9" label="预警描述"/>
            <el-table-column v-if="columns.visible('type')" :show-overflow-tooltip="true" prop="type" width="160"
                             label="预警类型" :formatter="warnConfTypeFormatter" key="type"
                             min-width="50" :filters="[{ text: 'AGENT服务掉线预警', value: 'AGENT_OFF' }, { text: 'AGENT服务上线通知', value: 'AGENT_ON' }, { text: '节点CPU预警', value: 'AGENT_CPU' }
                            , { text: '节点内存预警', value: 'AGENT_RAM' }, { text: '节点磁盘容量预警', value: 'AGENT_DISK' }
                           , { text: 'AGENT服务上/下线汇总通知', value: 'AGENT_ALL' },{ text: '中心切换通知', value: 'MASTER_SWITCH' },{ text: '内存队列数据量过大预警', value: 'RAM_QUEUE' },{ text: '任务实例数据量过大预警', value: 'DB_TASK' }]"
                             filter-placement="bottom-end" :filter-multiple="false" column-key="type">
              <template slot-scope="scope">
                {{ formatterType(scope.row.type) }}
              </template>
            </el-table-column>
            <el-table-column v-if="columns.visible('isMailNotic')" :show-overflow-tooltip="true" prop="isMailNotic"
                             label="是否邮件通知">
              <template slot-scope="scope">
                {{ formatterIsMailNotic(scope.row.isMailNotic) }}
              </template>
            </el-table-column>
            <el-table-column v-if="columns.visible('isSmsNotic')" prop="isSmsNotic" label="是否短信通知">
              <template slot-scope="scope">
                {{ formatterIsMailNotic(scope.row.isSmsNotic) }}
              </template>
            </el-table-column>
            <el-table-column v-if="columns.visible('warnStDate')" prop="warnStDate" :show-overflow-tooltip="true"
                             label="生效开始日期"/>
            <el-table-column v-if="columns.visible('warnEndDate')" prop="warnEndDate" :show-overflow-tooltip="true"
                             label="生效结束日期"/>
            <el-table-column v-if="columns.visible('upUser')" prop="upUser" label="修改人"/>
            <el-table-column v-if="columns.visible('upTs')" prop="upTs" :show-overflow-tooltip="true" label="更新时间"/>

          </el-table>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-bottom: 100px !important" v-if="crud.optPageShow.addPage">
        <div slot="header" class="clearfix">
          <div class="el-page-header">
            <div class="el-page-header__left" @click="crud.goBack">
              <i class="el-icon-back"></i>
              <div class="el-page-header__title">返回</div>
            </div>
            <div class="el-page-header__content">告警配置编辑</div>
          </div>
        </div>
        <div class="dataFrom">
          <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="240px">
            <div>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="预警描述" prop="param9">
                    <el-input v-model="form.param9" style="width: 400px;"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      预警类型的描述
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="预警类型" prop="type">
                    <el-select v-model="form.type" filterable placeholder="请选择" style="width: 400px;"
                               @change="changeType">
                      <el-option v-for="item in this.dict.sys_warn_conf_type" :key="item.value" :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">通过系统类型的不同来区分不同的监控点</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否邮件通知" prop="isMailNotic">
                    <el-switch v-model="form.isMailNotic" @change="checkNotic" active-value="1" inactive-value="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">选择邮件通知，则监控到异常后，系统会自动向通知对象发送相关异常邮件</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否短信通知" prop="isSmsNotic">
                    <el-switch v-model="form.isSmsNotic" @change="checkNotic" active-value="1" inactive-value="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">选择短信通知，则监控到异常后，系统会自动向通知对象发送相关异常短信</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否微信通知" prop="isWeChatNotic">
                    <el-switch @change="checkNotic" v-model="form.isWeChatNotic" active-value="1" inactive-value="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">是否微信通知</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item style="padding-right: 20%" label="是否限定生效周期" prop="isValidDate">
                    <el-switch v-model="form.isValidDate" active-value="1" inactive-value="2">
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">是否限定生效时间范围</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.isValidDate==1">
                <el-col :span="12">
                  <el-form-item style="padding-right: 20%" label="日期区间" prop="startEndDate">
                    <el-date-picker v-model="form.startEndDate" type="daterange" @change="changeDate(form.startEndDate)"
                                    unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    value-format=" yyyy-MM-dd"
                                    align="right">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">生效时间范围</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'AGENT_OFF' || form.type == 'AGENT_ON' || form.type == 'AGENT_CPU' || form.type == 'AGENT_RAM' || form.type == 'AGENT_DISK'
                              || form.type == 'AGENT_ALL'">
                <el-col :span="12">
                  <el-form-item label="监控对象" prop="isRegionAll">
                    <el-radio v-model="form.isRegionAll" label="1">所有Agent</el-radio>
                    <el-radio v-model="form.isRegionAll" label="2">自定义</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">该监控对象是针对Agent的，可以选择统一监控配置或部分Agent</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.isRegionAll == 2">
                <el-col :span="12">
                  <el-form-item label="Agent列表" prop="regionJsonList">
                    <el-select v-model="form.regionJsonList" multiple filterable="true" placeholder="请选择"
                               style="width: 400px">
                      <el-option v-for="item in agentList" :key="item.agentCode" :label="item.agentName"
                                 :value="item.agentCode"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">选择要监控的Agent</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'AGENT_ALL'">
                <el-col :span="12">
                  <el-form-item label="汇总时间点">
                    <el-time-select v-model="form.param1"
                                    :picker-options="{ start: '00:00',step: '00:10', end: '23:50' }">
                    </el-time-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">指定时间点汇总今日Agent上下线情况</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'RAM_QUEUE'">
                <el-col :span="12">
                  <el-form-item label="待执行队列">
                    <el-input-number v-model="form.param1" style="width: 260px" :min="100"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当待执行队列中周期作业数量超过设定的数值时，系统会自动通知管理员</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'RAM_QUEUE'">
                <el-col :span="12">
                  <el-form-item label="可执行队列">
                    <el-input-number v-model="form.param2" style="width: 260px" :min="100"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当可执行队列中周期作业数量超过设定的数值时，系统会自动通知管理员</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'RAM_QUEUE'">
                <el-col :span="12">
                  <el-form-item label="正在执行队列">
                    <el-input-number v-model="form.param3" style="width: 260px" :min="100"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当正在执行队列中周期作业数量超过设定的数值时，系统会自动通知管理员</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'DB_TASK'">
                <el-col :span="12">
                  <el-form-item label="周期任务实例总量">
                    <el-input-number v-model="form.param1" style="width: 260px" :min="10000"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当周期任务实例数量达到设定值时，系统自动通知管理员进行手动清理</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'DB_TASK'">
                <el-col :span="12">
                  <el-form-item label="周期任务实例未处理数量">
                    <el-input-number v-model="form.param2" style="width: 260px" :min="1000"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">周期任务实例未处理数量，系统不会自动通知管理员进行手动清理</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'DB_TASK'">
                <el-col :span="12">
                  <el-form-item label="定时任务实例总量">
                    <el-input-number v-model="form.param3" style="width: 260px" :min="100"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当定时任务实例数量达到设定值时，系统自动通知管理员进行手动清理</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'AGENT_RAM' || form.type == 'AGENT_DISK'">
                <el-col :span="12">
                  <el-form-item label="阀值类型" prop="param6">
                    <el-radio v-model="form.param6" label="1">占比</el-radio>
                    <el-radio v-model="form.param6" label="2">剩余量</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">该监控对象是针对Agent的，可以选择统一监控配置或部分Agent</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'AGENT_CPU'">
                <el-col :span="12">
                  <el-form-item label="Agent CPU使用率预警阀值（%）">
                    <el-input-number v-model="form.param1" :min="1" :max="100" style="width: 200px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当定时任务实例数量达到设定值时，系统自动通知管理员进行手动清理</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'AGENT_RAM' && form.param6 == 1">
                <el-col :span="12">
                  <el-form-item label="Agent 内存占用率预警阀值（%）">
                    <el-input-number v-model="form.param1" style="width: 260px" :min="1" :max="100"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当定时任务实例数量达到设定值时，系统自动通知管理员进行手动清理</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'AGENT_RAM' && form.param6 == 2">
                <el-col :span="12">
                  <el-form-item label="Agent 内存剩余量预警阀值（M）">
                    <el-input-number v-model="form.param1" :min="1" style="width: 200px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当定时任务实例数量达到设定值时，系统自动通知管理员进行手动清理</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'AGENT_DISK' && form.param6 == 1">
                <el-col :span="12">
                  <el-form-item label="Agent 磁盘容量使用率预警阀值(%)">
                    <el-input-number v-model="form.param1" style="width: 260px" :min="1" :max="100"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当定时任务实例数量达到设定值时，系统自动通知管理员进行手动清理</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'AGENT_DISK' && form.param6 == 2">
                <el-col :span="12">
                  <el-form-item label="Agent 磁盘容量剩余量预警阀值(M)">
                    <el-input-number v-model="form.param1" style="width: 260px" :min="1"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当定时任务实例数量达到设定值时，系统自动通知管理员进行手动清理</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="通知对象" prop="informObj">
                    <el-checkbox v-model="form.isToSys" false-label="false" true-label="true"
                                 label="系统管理员"></el-checkbox>
                    <el-checkbox v-model="form.isToApp" false-label="false" true-label="true"
                                 label="应用管理员"></el-checkbox>
                    <el-checkbox v-model="form.isToPerson" @change="changeToPerson" false-label="false"
                                 true-label="true" label="自定义"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">异常信息接收者</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.isToPerson === 'true'">
                <el-col :span="12">
                  <el-form-item label="人员列表" prop="toUserList">
                    <el-select v-model="form.toUserList" multiple filterable="true" placeholder="请选择"
                               style="width: 400px">
                      <el-option v-for="item in userList" :key="item.id" :label="item.nickName" :value="item.id"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">可以自定义选择某些人员进行异常接收</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>

            </div>
          </el-form>
        </div>
        <div class="form-operator-button">
          <el-button :loading="crud.status.cu === 2" type="primary" v-bind:disabled="!this.isSubmit"
                     @click="crud.submitCU">保存
          </el-button>
          <el-button @click="crud.goBack">返回</el-button>
        </div>
      </el-card>
    </div>
    <WarnConfInf v-if="showDetail" :pkId="pkId" ref="WarnConfInf" :goBack="goBack" style="margin-left: 30px;margin-top: -10px;"/>
  </div>
</template>
<script>
import warnConfApi from '@/api/alarm/warnConf'
import agentApi from '@/api/system/node'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/warnConf/admin/CRUD.operation'
import WarnConfInf from './warnConfDetail'

const queryList = [{
  'cloumValue': 'param9',
  'cloumName': '预警描述'
}]
const defaultCrud = CRUD({
  title: '告警配置',
  url: '/api/warnConf/selectPages',
  queryList: queryList,
  crudMethod: {
    ...warnConfApi
  }
})
const defaultForm = {
  informObj: [],
  pkId: null,
  appCode: null,
  type: null,
  isMailNotic: '1',
  isSmsNotic: null,
  isRegionAll: '1',
  isToSys: true,
  isToApp: false,
  toJson: null,
  regionJson: null,
  isValidDate: null,
  startEndDate: null,
  param1: null,
  param2: null,
  param3: null,
  param4: null,
  param5: null,
  param6: null,
  param7: null,
  param8: null,
  param9: null,
  isToPerson: 'false',
  regionJsonList: [],
  toUserList: []
}
export default {
  name: 'warnConf',
  components: {
    crudOperation,
    WarnConfInf
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['sys_warn_conf_type'],
  data() {
    var validateParam = (rule, value, callback) => {
      if (rule.field === 'param9') {
        if (value.split(" ").join("").length == 0) {
          callback(new Error("预警类型描述不能为空字符串！"));
        } else {
          setTimeout(() => {
            //节点编码重复判断
            var param = {
              "param9": value
            }
            if (this.isAdd == true) {
              warnConfApi.validateParam(param).then(res => {
                if (res === true) {
                  callback(new Error('预警类型描述重复!'));
                } else {
                  callback();
                }
              });
            } else {
              callback();
            }
          }, 1000)
        }
      }
    }

    var validateInformObj = (rule, value, callback) => {
      if (JSON.parse(this.form.isToSys) === false && JSON.parse(this.form.isToApp) === false
        && JSON.parse(this.form.isToPerson) === 'false') {
        callback(new Error('请至少选择一项通知对象!'));
      } else {
        callback();
      }
    }
    return {
      permission: {
        add: ['warnConf:add'],
        edit: ['warnConf:edit'],
        del: ['warnConf:del']
      },
      isToPerson: 'true',
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      checkAll: true,
      isIndeterminate: true,
      showQryParamFlag: false,
      addDialog: false,
      isAdd: false,
      agentList: [],
      userList: [],
      rules: {
        startEndDate: [
          {
            required: true,
            message: '请选择日期区间',
            trigger: 'change'
          }
        ],
        regionJsonList: [
          {
            required: true,
            message: '请选择agent',
            trigger: 'change'
          }
        ],
        toUserList: [
          {
            required: true,
            message: '请选择人员列表',
            trigger: 'change'
          }
        ],
        param9: [{
          required: true,
          message: '请输入预警描述',
          trigger: 'blur'
        },
          {
            validator: validateParam,
            trigger: 'blur'
          },
        ],
        type: [{
          required: true,
          message: '请选择预警类型',
          trigger: 'change'
        }],
        isRegionAll: [{
          required: true,
          message: '请选择监控对象',
          trigger: 'change'
        }],
        informObj: [{
          required: true,
          validator: validateInformObj,
          trigger: 'change'
        }]
      },
      show: false,
      isSubmit: true,
      appWarnConfTypeDict: [],
      appWarnConfTypeStatusDict: [],
      pkId: null,
      showDetail: false
    }
  },
  computed: {},
  created() {
    this.crud.optPageShow.listPage = true;
    this.crud.optPageShow.addPage = false;
    this.initAgentList();
    this.initUserList();
    this.appWarnConfTypeDict = this.dict.exec_status;
  },
  watch: {
    appWarnConfTypeDict() {
      this.$nextTick(() => {
        this.appWarnConfTypeDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.appWarnConfTypeStatusDict.push(obj);
        })
      })
    }
  },
  methods: {
    // 新增前
    [CRUD.HOOK.beforeToAdd](crud) {
      this.isAdd = true;
      this.$set(crud.form, 'warnStData', null);
      this.$set(crud.form, 'warnEndData', null);
      this.$set(crud.form, 'startEndDate', null);
    },
    // 编辑应用前
    [CRUD.HOOK.beforeToEdit](crud) {
      this.isAdd = false;
      let arrayObj = new Array();
      if (crud.form.warnStDate != null) {
        arrayObj.push(new Date(crud.form.warnStDate), new Date(crud.form.warnEndDate));
      }
      this.$set(crud.form, 'startEndDate', arrayObj);
      this.getEditWarnConf(crud.form.pkId);
    },
    formatterIsMailNotic(val) {
      if (val == '1') {
        return '是'
      } else {
        return '否'
      }
    },
    goBack() {
      this.crud.optPageShow.listPage = true;
      this.showDetail = false;
      this.crud.refresh();
    },
    editClick(row, column, event) {
      this.showDetail = true;
      this.crud.optPageShow.listPage = false;
      this.pkId = row.pkId;
    },
    warnConfTypeFormatter(row, column) {
      return this.dict.label.sys_warn_conf_type[row.type]
    },
    formatterType(val) {
      return this.dict.label.sys_warn_conf_type[val]
    },
    formatterappWarnConfType(val) {
      return this.dict.label.app_warn_conf_type[val]
    },
    initAgentList() {
      agentApi.getAgentList().then(res => {
        this.agentList = res;
      })
    },
    initUserList() {
      warnConfApi.getUserList().then(res => {
        this.userList = res;
      })
    },
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.allColumnsSelected = true
        return
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val
      }
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(value) {
      let totalCount = 0
      let selectedCount = 0
      for (const key in this.crud.props.tableColumns) {
        ++totalCount
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
      }
      if (selectedCount === 0) {
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
        this.$nextTick(function () {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
    },
    getEditWarnConf(pkId) {
      warnConfApi.getEditWarnConf(pkId).then(res => {
        this.form.regionJsonList = res.regionJsonList;
        this.form.toUserList = res.toUserList;
        this.form.isToSys = res.isToSys;
        if (this.form.isToSys == 'true') {
          this.form.isToSys = true;
        } else {
          this.form.isToSys = false;
        }
        this.form.isToApp = res.isToApp;
        if (this.form.isToApp == 'true') {
          this.form.isToApp = true;
        } else {
          this.form.isToApp = false;
        }
        this.form.isToPerson = 'false'
        if (this.form.toUserList !== null) {
          this.form.isToPerson = 'true'
        }
      })
    },
    changeType() {
      if ('3' === this.form.type || '12' === this.form.type) {
        this.form.param1 = '80';
      } else if ('11' === this.form.type || '13' === this.form.type) {
        this.form.param1 = '80';
        this.form.param6 = '1';
      } else {
        this.form.param1 = '';
        this.form.param6 = '';
      }
    },
    changeToPerson(val) {
      if (val === 'false') {
        this.form.toUserList = []
      }
    },
    checkNotic() {
      if (this.form.isMailNotic == "2" && this.form.isSmsNotic == "2" && this.form.isWeChatNotic == "2") {
        this.crud.notify('请至少选择一项通知方式', CRUD.NOTIFICATION_TYPE.WARNING)
        this.isSubmit = false
        return
      } else {
        this.isSubmit = true
      }
    },
  }
}
</script>
